<template>
  <div>这是详情页面 - {{ $route.params.id }}</div>
</template>

<script>
export default {
  props: ["id"],
  created() {
    // this.$route表示当前路由的路由信息，主要包含的是url的相关信息
    // console.log(this.$route);
    // console.log(this.$route.params.id);

    // 拿到id之后要去请求相关数据

    // 当比如，点击猜你喜欢的时候，从一个详情页跳转到了另一个详情页
    // vue会判断我们使用了同一个组件，直接复用原有的组件
    // 不会去销毁旧组件，不会去创建新组件
    // 就不会重新去执行生命周期，不会去请求，不会更新页面

    console.log(this.id);
  },

  // 可以通过监听$route的方式来解决上面的问题
  watch: {
    // 里面的两个参数就是要去的那个页面和来的那个页面的路由信息
    $route(to, form) {
      // console.log("路由改变了");
      console.log(to.params.id);
    },
  },
};
</script>
